import React, { useState } from "react";
import "../../../../assets/sass/home_page/free_templates/featured_picks/today_recommend/boxc_type_four/boxc_type_four.css";
import { EyeFilled, StarFilled } from "@ant-design/icons";
import { Progress } from "antd";

const BoxcTypeFour = () => {
  const imageList = [
    "/src/assets/image/home_page/main/box_type_four/image/1.jpg",
    "/src/assets/image/home_page/main/box_type_four/image/2.jpg",
    "/src/assets/image/home_page/main/box_type_four/image/3.jpg",
    "/src/assets/image/home_page/main/box_type_four/image/4.jpg",
    "/src/assets/image/home_page/main/box_type_four/image/5.jpg",
    "/src/assets/image/home_page/main/box_type_four/image/6.jpg",
    "/src/assets/image/home_page/main/box_type_four/image/7.jpg",
    "/src/assets/image/home_page/main/box_type_four/image/8.jpg",
    "/src/assets/image/home_page/main/box_type_four/image/9.jpg",
    "/src/assets/image/home_page/main/box_type_four/image/10.jpg",
  ];

  const [activeIndex, setActiveIndex] = useState(0);
  const [progress, setProgress] = useState(null);

  const mouseEnter = () => {};

  const mouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const boxRect = e.currentTarget.getBoundingClientRect();
    const mousePosition = e.clientX - boxRect.left;
    const imageWidth = boxRect.width / 10;
    const newIndex = Math.floor(mousePosition / imageWidth);
    if (newIndex !== activeIndex && newIndex >= 0 && activeIndex <= 10) {
      setActiveIndex(newIndex);
      setProgress(newIndex * 10);
    }
  };

  const mouseLeave = () => {
    setActiveIndex(0);
    const doms = document.querySelectorAll(".boxc_type_four");
    doms.forEach((item) => {
      item.classList.add("boxc_type_four_leave");
    });
  };

  return (
    <div
      className="boxc_type_four"
      onMouseEnter={mouseEnter}
      onMouseMove={mouseMove}
      onMouseLeave={mouseLeave}
    >
      <div className="img_box">
        {imageList &&
          imageList.map((item, index) => {
            return (
              <img
                style={{ display: activeIndex === index ? "block" : "none" }}
                src={item}
                key={index}
              />
            );
          })}
      </div>
      <div className="bottom_bar">
        <div className="text">红色简约高考加油祝福考试注意事项倒计时</div>
        <div className="user_info">
          <div className="user">
            <div className="avatar">
              <img src="/src/assets/image/home_page/main/box_type_four/userinfo/avatar.jpg" />
            </div>
            <div className="username">金桔柠檬</div>
          </div>
          <div className="see">
            <EyeFilled className="eye_icon" />
            <span className="see_num">78</span>
          </div>
        </div>
      </div>
      <div className="type">H5</div>
      <div className="collection">
        <StarFilled />
      </div>
      <div className="free_text">会员免费用</div>
      <div className="page">{activeIndex + 1}/10</div>
      <Progress
        className="progress"
        percent={progress}
        showInfo={false}
        size="small"
        strokeLinecap="butt"
      />
    </div>
  );
};

export default BoxcTypeFour;
